<template>
  <!-- 注册  -->
  <div class="register_box">
    <!-- 头部 -->
    <div class="register_header">
      <div class="header_left">
        <img src="/static/img/logos.png" />
        <div>
          <p>健康生活系统</p>
          <p>Healthy living system</p>
        </div>
      </div>
      <div class="header_right">
          <span>已经账号?</span>
          <span @click="$router.push({ name: 'login' })">直接登录</span>
      </div>
    </div>
    <!-- 注册部分 -->
    <div class="container-register">
      <el-tabs v-model="activeName">
        <!-- 家长注册 -->
        <el-tab-pane label="家长注册" name="parent">
          <template v-if="isParent">
            <el-form :model="parentForm" status-icon :rules="rules" ref="parentForm" label-width="100px" class="parent-ruleForm">
              <el-form-item prop="name" label-width="0">
                <el-input
                  v-model="parentForm.name"
                  prefix-icon="el-icon-user-solid"
                  placeholder="请输入家长真实姓名"
                ></el-input>
              </el-form-item>
              <el-form-item prop="password" label-width="0">
                <el-input
                  type="password"
                  v-model="parentForm.password"
                  prefix-icon="el-icon-key"
                  placeholder="请输入6-16位密码"
                ></el-input>
              </el-form-item>
              <el-form-item prop="parentCheckPass" label-width="0">
                <el-input
                  type="password"
                  v-model="parentForm.checkPass"
                  prefix-icon="el-icon-success"
                  placeholder="请确认密码"
                ></el-input>
              </el-form-item>
              <el-form-item prop="phone" label-width="0">
                <el-input
                  v-model="parentForm.phone"
                  prefix-icon="el-icon-mobile-phone"
                  placeholder="请输入手机号"
                ></el-input>
              </el-form-item> 
              <el-form-item prop="verificationCode" label-width="0">
                  <el-input
                  v-model="parentForm.verificationCode"
                  prefix-icon="el-icon-success"
                  placeholder="请输入验证码"></el-input>
                  <el-button v-show="showCode" @click="getCode('parent')">获取验证码</el-button>
                  <el-button v-show="!showCode" class="count" disabled>{{count}} s</el-button>
              </el-form-item>
              <el-form-item label-width="0">
                <el-button type="primary" @click="submitParentForm('parentForm')">下一步 绑定学生账号</el-button>
              </el-form-item>
            </el-form>
          </template>
          <template v-else>
            <el-form :model="rulesChildForm" status-icon :rules="rules" ref="rulesChildForm" label-width="100px" class="child-ruleForm">
              <el-form-item prop="classId" label-width="0">
                <el-input
                  v-model="rulesChildForm.classId"
                  prefix-icon="el-icon-user-solid"
                  placeholder="请输入你孩子所在班级码"></el-input>
              </el-form-item>
              <el-form-item prop="name" label-width="0">
                <el-input
                  v-model="rulesChildForm.name"
                  prefix-icon="el-icon-user-solid"
                  placeholder="请输入孩子真实姓名"
                ></el-input>
              </el-form-item>
              <el-form-item prop="accountId" label-width="0">
                <el-input
                  v-model.number="rulesChildForm.accountId"
                  prefix-icon="el-icon-key"
                  placeholder="请输入孩子登录账号，建议班级码+学号"
                ></el-input>
              </el-form-item>
              <el-form-item prop="password" label-width="0">
                <el-input
                  v-model.number="rulesChildForm.password"
                  prefix-icon="el-icon-key"
                  placeholder="为孩子设置6 - 16位密码，区分大小写"
                ></el-input>
              </el-form-item> 
              <el-form-item prop="checkPass" label-width="0">
                <el-input
                  v-model.number="rulesChildForm.checkPass"
                  prefix-icon="el-icon-success"
                  placeholder="请确认密码"
                ></el-input>
              </el-form-item>
              <el-form-item label-width="0">
                <el-button type="primary" @click="submitParentForm('rulesChildForm')">注册</el-button>
              </el-form-item>
            </el-form>
          </template>
        </el-tab-pane>
        <!-- 老师注册 -->
        <el-tab-pane label="老师注册" name="teacher">
          <el-form :model="rulesTeacherForm" status-icon :rules="rules" ref="rulesTeacherForm" label-width="100px" class="teacher-ruleForm">
            <el-form-item prop="schoolCode" label-width="0">
                <el-input
                v-model="rulesTeacherForm.schoolCode"
                prefix-icon="el-icon-s-data"
                placeholder="请输入您的学校码"></el-input>
                <el-button>申请学校代码</el-button>
            </el-form-item>
            <el-form-item prop="classId" label-width="0">
              <el-input
                v-model="rulesTeacherForm.classId"
                prefix-icon="el-icon-user-solid"
                placeholder="请选择您所在班级"></el-input>
            </el-form-item>
            <el-form-item prop="name" label-width="0">
              <el-input
                v-model="rulesTeacherForm.name"
                prefix-icon="el-icon-user-solid"
                placeholder="您的真实姓名"
              ></el-input>
            </el-form-item>
            <el-form-item prop="password" label-width="0">
              <el-input
                v-model.number="rulesTeacherForm.password"
                prefix-icon="el-icon-key"
                placeholder="请输入6-16位密码"
              ></el-input>
            </el-form-item>
            <el-form-item prop="checkPass" label-width="0">
              <el-input
                v-model.number="rulesTeacherForm.checkPass"
                prefix-icon="el-icon-success"
                placeholder="请确认密码"
              ></el-input>
            </el-form-item>
            <el-form-item prop="phone" label-width="0">
              <el-input
                v-model="rulesTeacherForm.phone"
                prefix-icon="el-icon-mobile-phone"
                placeholder="请输入手机号"
              ></el-input>
            </el-form-item>
            <el-form-item prop="verificationCode" label-width="0">
                <el-input
                v-model="rulesTeacherForm.verificationCode"
                prefix-icon="el-icon-success"
                placeholder="请输入验证码"></el-input>
                <el-button v-show="showCode" @click="getCode('teacher')">获取验证码</el-button>
                <el-button v-show="!showCode" class="count" disabled>{{count}} s</el-button>
            </el-form-item>
            <el-form-item label-width="0">
              <el-button type="primary" @click="submitTeacherForm('rulesTeacherForm')">注册</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
        activeName: 'parent',
        // 家长
        isParent: true,
        parentForm: {
          name: '',
          password: '',
          checkPass: '',
          phone: '',
          verificationCode: ''
        },
        // 孩子
        rulesChildForm: {
          classId: '',
          name: '',
          accountId: '',
          password: '',
          checkPass: ''
        },
        // 老师
        showCode: true,
        count: '',
        timer: null,
        rulesTeacherForm: {
          schoolCode: '',
          classId: '',
          name: '',
          password: '',
          checkPass: '',
          phone: null,
          verificationCode: ''
        },
        rules: {
          schoolCode: [
            { validator: valSchCode, trigger: 'blur' }
          ],
          classId: [
            { validator: validatePass, trigger: 'blur' }
          ],
          name: [
            { validator: userName, trigger: 'blur' }
          ],
          accountId: [
            { validator: checkAge, trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, max: 16, message: '请至少输入 6 个字符。请不要使用容易被猜到的密码。', trigger: 'blur' }
          ],
          parentCheckPass: [
            { validator: this.validatePass2, trigger: 'blur' }
          ],
          phone: [
            // 必填规则required：true必填规则，message不符合规则时的提示
            { required: true, message: "请输入手机号", trigger: "blur" },
            // 手机号需要自定义校验
            { validator: validMobile, trigger: "blur" }
         ],
          verificationCode: [
            { validator: checkAge, trigger: 'blur' }
          ],
        }
    }
    const userName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入姓名'));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error('请输入数字值'));
        } else {
          if (value < 18) {
            callback(new Error('必须年满18岁'));
          } else {
            callback(new Error(value));
          }
        }
      }, 1000);
    };
    const valSchCode = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('年龄不能为空'));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error('请输入数字值'));
        } else {
          if (value < 18) {
            callback(new Error('必须年满18岁'));
          } else {
            callback();
          }
        }
      }, 1000);
    };
    const checkAge = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('年龄不能为空'));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error('请输入数字值'));
        } else {
          if (value < 18) {
            callback(new Error('必须年满18岁'));
          } else {
            callback();
          }
        }
      }, 1000);
    };
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.rulesChildForm.checkPass !== '') {
          this.$refs.rulesChildForm.validateField('checkPass');
        }
        callback();
      }
    };
    const validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.parentForm.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    const validMobile = (rule, value, callback) => {
      // 校验逻辑：1开头+第二位数字（3-9）+9位数字结尾
      if (!/^1[3-9]\d{9}$/.test(value).Number())
        return callback(new Error("请输入正确的手机号"));
      callback();
    };
  },
  created() {
  },
  methods: {
    // 家长注册
    submitParentForm(formName) {
      if (formName == 'parentForm') {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.isParent = !this.isParent
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      } else {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    },
    // 教师注册
    submitTeacherForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    getCode(){
     const TIME_COUNT = 60;
     if (!this.timer) {
       this.count = TIME_COUNT;
       this.showCode = false;
       this.timer = setInterval(() => {
       if (this.count > 0 && this.count <= TIME_COUNT) {
         this.count--;
        } else {
         this.showCode = true;
         clearInterval(this.timer);
         this.timer = null;
        }
       }, 1000)
      }
    }
  },
  computed: {

  },
  watch: {
    activeName (val, newVal) {
      if (newVal != 'parent') {
        this.isParent = true
      }
    }
  },
  mounted() {

  }
}
</script>

<style lang="scss" scoped>
.register_box {
  overflow-y: hidden;
	overflow-x: scroll;
}
/deep/::-webkit-scrollbar {
  width: 0 !important;
  display: none;
}
/deep/::-webkit-scrollbar {
  width: 0 !important;height: 0;
}
.register_box {
  padding: 0.1302rem;
  background-color: #f7fafc;
  // 头部
  .register_header {
    border-radius: 0.0781rem;
    width: 100%;
    height: 0.4167rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    background-color: #ffffff;
    justify-content: space-between;
    .header_left {
      width: 1.6667rem;
      background-color: #0fdd8d;
      height: 0.4167rem;
      display: flex;
      align-items: center;
      justify-content: center;
      > img {
        width: 0.3021rem;
        margin-right: 0.1146rem;
      }
      > div {
        > p:first-child {
          font-size: 0.1042rem;
          color: #fff;
        }
        > p:nth-of-type(2) {
          font-size: 0.0521rem;
          color: #fff;
        }
      }
    }
    .header_right {
      margin-right: 0.651rem;
      span {
        margin-left: 0.1615rem;
        font-size: 0.0938rem;
        font-weight: 500;
        color: #888888;
        line-height: 0.1302rem;
      }        
      span:nth-child(2) {
        color: #0FDD8D;
        &:hover {
            cursor: pointer;
        }
      }
    }
  }
  // 注册内容
  .container-register {
    width: 100%;
    background: #FFFFFF;
    border-radius: 0.0781rem; 
    margin-top: 0.1302rem;
    overflow: hidden;
    .el-tabs {
      margin: 0.3906rem auto 0.6094rem;
      width: 2.8021rem;
      /deep/.el-tabs__item.is-active {
        color:#0FDD8D;
        font-size: 0.1458rem;
        // border-bottom: 0.0104rem solid #0FDD8D;
      }
      /deep/.el-tabs__item:hover {
        color: #0FDD8D;
      }
      /deep/.el-tabs__item {
        color: #888888;
        font-size: 0.125rem;
        height: 0.3646rem;
        line-height: 0.3646rem;
      }
      /deep/.el-tabs__nav>.el-tabs__active-bar {
        // display: none;
        background-color: #0FDD8D;
      }
      /deep/.el-tabs__nav-wrap::after {
        bottom: 0.0104rem
      }
      /deep/.el-tabs__nav-wrap::after {
        bottom: 0.0053rem;
      }
      .parent-ruleForm {
        .el-form-item {
          /deep/.el-input--suffix .el-input__inner, /deep/.el-input--medium, /deep/.el-input__inner {
            background-color: #F7FBFC ;
            height: 0.3125rem;
            width: 100%;
            margin-right: 0.1042rem;
            border-radius: 0.0521rem;
            border: none;
          }
          &:nth-last-child(2){
            & /deep/.el-form-item__content {
                display: flex;
                justify-content: space-between;
            }
            /deep/.el-input--suffix .el-input__inner, /deep/.el-input--medium, /deep/.el-input__inner {
              width: 1.8333rem;
            }
            .el-button {
              width: 0.8385rem;
              height: 0.3125rem;
              background: #F7FBFC;
              border-radius: 0.0625rem;
              font-size: 0.0938rem;
              font-weight: 900;
              color: #0FDD8D;
              line-height: 0.1302rem;
              opacity: 1;
              border: none;
              &:active {
                box-shadow: 0px 1px 0px #0FDD8D;
                // border: 1px solid#0fdd8d;
              }
            }
          }
          &:last-child {
            .el-button {
              height: 60px;
              background: #0FDD8D;
              border-radius: 12px;
              font-size: 24px;
              font-weight: 500;
              color: #FFFFFF;
              line-height: 33px;
              opacity: 1;
            }
          }
        }
      }
      .child-ruleForm {
        .el-form-item {
          /deep/.el-input--suffix .el-input__inner, /deep/.el-input--medium, /deep/.el-input__inner {
            background-color: #F7FBFC ;
            height: 0.3125rem;
            width: 100%;
            margin-right: 0.1042rem;
            border-radius: 0.0521rem;
            border: none;
          }
        }
      }
      .teacher-ruleForm {
        .el-form-item {
          /deep/.el-input--suffix .el-input__inner, /deep/.el-input--medium, /deep/.el-input__inner {
            background-color: #F7FBFC ;
            height: 0.3125rem;
            width: 100%;
            margin-right: 0.1042rem;
            border-radius: 0.0521rem;
            border: none;
          }
          &:first-child {
            & /deep/.el-form-item__content {
                display: flex;
                justify-content: space-between;
            }
            /deep/.el-input--suffix .el-input__inner, /deep/.el-input--medium, /deep/.el-input__inner {
              width: 1.8333rem;
            }
            .el-button {
              width: 0.8385rem;
              height: 0.3125rem;
              background: #F7FBFC;
              border-radius: 0.0625rem;
              font-size: 0.0938rem;
              font-weight: 900;
              color: #0FDD8D;
              line-height: 0.1302rem;
              opacity: 1;
              border: none;
              &:active {
                box-shadow: 0px 1px 0px #0FDD8D;
                // border: 1px solid#0fdd8d;
              }
            }
          }
          &:nth-last-child(2){
            & /deep/.el-form-item__content {
                display: flex;
                justify-content: space-between;
            }
            /deep/.el-input--suffix .el-input__inner, /deep/.el-input--medium, /deep/.el-input__inner {
              width: 1.8333rem;
            }
            .el-button {
              width: 0.8385rem;
              height: 0.3125rem;
              background: #F7FBFC;
              border-radius: 0.0625rem;
              font-size: 0.0938rem;
              font-weight: 900;
              color: #0FDD8D;
              line-height: 0.1302rem;
              opacity: 1;
              border: none;
              &:active {
                box-shadow: 0px 1px 0px #0FDD8D;
                // border: 1px solid#0fdd8d;
              }
            }
          }
        }
      }
    }
    .el-button {
      width: 100%;
      height: 0.3125rem;
      background: #0FDD8D;
      border-radius: 0.0625rem;
      opacity: 0.3;
      font-size: 0.125rem;
      font-weight: 500;
      color: #FFFFFF;
      line-height: 0.1719rem;
    }
    .el-button--primary {
        border: none;
    }
  }
}


</style>
